import React, { Component } from "react";

// 一切皆组件
// react的路由是模糊匹配，vue的精准匹配

// 本身没有意义，只有被BrowserRouter组件包住的部分里面才可以使用路由
// Link组件相当于vue的router-link
// react的路由默认是包容性路由，vue的路由默认是排他性路由
// Switch组件将路由变成排他性路由
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

class Home extends Component {
  render() {
    return <div>这是home页面</div>;
  }
}
class About extends Component {
  render() {
    return <div>这是about页面</div>;
  }
}

class App extends Component {
  state = {};
  render() {
    return (
      <BrowserRouter>
        <h2>react-router-v5-basic</h2>

        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* exact属性表示精准匹配 */}
          {/* 加入组件的方式有4种，component相对比较通用的方式 */}
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;
